<template>
  <section class="component work-message">
    <span @click="dialog.messageBox = true">
      <el-badge :value="unReadCount" v-if="unReadCount" class="icon">
        <svg-icon iconName="message" iconSize="32"></svg-icon>
      </el-badge>
      <svg-icon v-else class="icon" iconName="message" iconSize="32"></svg-icon>
    </span>
    <el-dialog :visible.sync="dialog.messageBox" title="消息列表">
      <message-box :visible.sync="dialog.messageBox" @update-msg-count="getUnReadCount" @view-detail="onViewDetail"></message-box>
    </el-dialog>
    <el-dialog title="消息详情" :visible.sync="dialog.messageDetail">
      <message-detail :message="msgDetail" @close-view-detail = "closeViewDetail"></message-detail>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State, Mutation, Action, namespace } from "vuex-class";
import MessageBox from "~/components/workspace/message/message-box.vue";
import MessageDetail from "~/components/workspace/message/message-detail.vue";
import SvgIcon from "~/components/common/svg-icon.vue";
import { Dependencies } from "~/core/decorator";
import { ReminderMessageService } from "~/services/common-service/reminder-message.service";
import {ApplyType, CASE_CHANNEL, CASE_HALT_CATEGORY, reminderType } from "~/config/enum.config"
import { ReminderService, ReminderMessageType } from "~/utils/reminder.service"
import { OpenExecutionData } from "~/config/types";
const workspaceModule = namespace("workspace");
const CollectionExecutionModule = namespace('collection-execution');

@Component({
  components: {
    MessageBox,
    SvgIcon,
    MessageDetail
  }
})
export default class WorkMessage extends Vue {
  @Dependencies(ReminderMessageService) private reminderMessageService: ReminderMessageService;
  // @workspaceModule.State private unReadCount;
  @workspaceModule.State("messageBoxVisible") private mMessageBoxVisible
  @workspaceModule.Mutation private updateMessageBoxVisible
  // @workspaceModule.Action private updateUnReadCount;
  @CollectionExecutionModule.Action private openCollectionExecution;

  private unReadCount = 0;
  private msgDetail = {}

  private dialog = {
    messageBox: false,
    messageDetail: false
  }
  private caseData:any = []
  private created(){
    window.setInterval(() => {
      setTimeout(() => {
        this.getAllSocketMessage()
      }, 1)
    }, 60000);
  }
  //获取未读弹出消息
  private getAllSocketMessage(){
    this.reminderMessageService.getAllSocketMessage().subscribe(
        (data) => {
          if(data.length!==0){this.unReadCount += data.length;}
          data.map(x=>{
            if(x.type ==="PTP_REMINDER"){
              this.caseData = x
              this.showNotify(x)
            }
          })
        }
    )}
  private mounted() {
    // 更新未读消息
    this.getUnReadCount();
    // 收到消息通知时更新未读消息
    // ReminderService.getInstance()
    //   .addListener(ReminderMessageType.Reminder)
    //   .subscribe(data => {
    //     this.unReadCount += 1;
    //     console.log(data,"work-message")
    //     this.caseData = data
    //     if(data.type ==="PTP_REMINDER"){
    //       console.log("承诺还款")
    //         this.showNotify(data)
    //     }
    //   })
  }

  private getUnReadCount() {
    this.reminderMessageService.getUnReadCount().subscribe(n => this.unReadCount = n)
  }

  private openExecutionPage() {
    this.openCollectionExecution(new OpenExecutionData(this.caseData.caseId, this.caseData.caseNumber, CASE_CHANNEL.tel))
  }
  private showNotify(data) {
    console.log(data.type,"执行消息弹窗")
    
    const h = this.$createElement;
    const option: any = {
      type: data.type,
      title: data.title,
      //增加消息跳转执行页
      message: h('a',{on:{click:this.openExecutionPage},style:'color: blue'},data.content), 
      position: 'bottom-right',
      iconClass: "el-icon-bell",
      customClass: 'remind_notify',
      duration: data.duration || 6666,
    }
    if (data.messageMode === "POPUP") {
      option.onClick = () => this.onViewDetail(data)
    }
    this.$notify(option)
    
  }

  private onViewDetail(data) {
    this.msgDetail = data
    this.dialog.messageDetail = true
    this.getUnReadCount()
  }
  private closeViewDetail() {
    this.dialog.messageDetail = false
  }
}
</script>

<style lang="less" scoped>
.component.work-message {
  margin-right: 20px;
  .icon {
    color: white;
    cursor: pointer;
  }
}
</style>
